<template>
	
	<menu-content/>
	
	<view class="mlr-80 font-bold color-3 pt-80">
		<view class="font-48">欢迎您，</view>
		<view class="font-48 mt-20">{{userInfo.username}}</view>
	</view>
	
	<view class="mlr-80 font-26 color-8">以下是你当前的任务统计数据</view>
	
	
	<block v-for="(item,index) in taskTotal">
		<view class="mlr-80 mt-20 radius-20 plr-30 ptb-20 " :class="item.color">
			<view class="color-f opacity-6 font-24">{{item.label}}</view>
			<view class="flex-between mt-16">
				<view class="color-f font-50 font-bold">{{item.value}}</view>
				<view></view>
			</view>
		</view>
	</block>
	
	
	<view class="color-3 mlr-80 mt-65 font-30">今日任务</view>
	<block v-for="(item,index) in tasks">
		<view class="task-item red" :class="itemStaus(item.status)">
			<view class="title">完成首页的搭建</view>
			<view class="time">17:32:51</view>
		</view>
	</block>
	<view v-if="tasks.length==0" class="flex-centent h-140 color-9 font-24">【暂无任务】</view>
	
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				// 任务统计
				taskTotal:[
					{ label:'今日待完成', value:'0', color:'bg-blue' },
					{ label:'超期未完成', value:'0', color:'bg-red' },
					{ label:'参与的项目', value:'0', color:'bg-green' },
				],
				
				// 任务列表
				tasks:[],
			}
		},
		computed:mapState('user',['userInfo','isLogin']),
		created() {
			
			if(!uni.getStorageSync('uni_id_token')){
				uni.reLaunch({
					url:'/pages/login/login'
				})
				return
			}
		},
		methods:{
			// 状态判断
			itemStaus(status){
				switch (status){
					case 0:
						return 'red'
						break;
					case 1:
						return 'blue'
						break;
					default:
						return 'red'
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.task-item{
		margin: 20rpx 80rpx;
		background: #f3f3f4;
		border-radius: 12rpx;
		padding: 16rpx 20rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		&.red{
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 50%;
				background: #f16b62;
			}
		}
		&.blue{
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 50%;
				background: #2d8cf0;
			}
		}
		
		.title{
			color: #333;
		}
		.time{
			color: #999;
		}
	}
</style>
